<script setup>
import {useQaStore} from "stores/allQaMessage";
import {storeToRefs} from "pinia";
import {reactive, ref} from "vue";
import bus from "src/utils/eventBus.js";
import {conf} from "src/utils/serverHost.js";
import OnlyOffice from "components/onlyOffice.vue";

let streamStore = useQaStore()
let {questionMsg} = storeToRefs(streamStore)
let officeDom = ref(null)
let global = reactive({
    type: '',
    faq: []
})
const select = (type) => {
    global.type = type;
}
fetch(conf.httpHost + '/QueryFaq', {
    method: 'GET',
}).then(response => {
    if (!response.ok) {
        throw new Error('Network response was not ok');
    }
    return response.text(); // 或者 response.json() 取决于服务器返回的数据类型
}).then(data => {
    data = JSON.parse(data);
    global.faq = data.faq;
})
const question = (x) => {
    bus.$emit("sendQuestion",JSON.parse(JSON.stringify(x)))
}
const textHttp = () => {//学前教育、义务教育阶段入学办理      80周岁以上老年人高龄津贴发放
    fetch(conf.httpHost + '/QueryEventByEventName?eventName=失业登记', {
        method: 'GET',
    })
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.text(); // 或者 response.json() 取决于服务器返回的数据类型
        })
        .then(data => {
            console.log(data); // 服务器返回的响应数据
            let eventId = JSON.parse(data).event.id
            bus.$emit('clickEvent', '失业登记', eventId)
        })
        .catch(error => {
            console.error('There has been a problem with your fetch operation:', error);
        });
}
const showFile = () => {
  officeDom.value.openDialog("http://112.192.23.17:5080/DownloadMistakeFile?fileurl=/usr/local/preview/filetemp/四川省失业登记表.docx")
}
</script>

<template>
    <div class="answer-entry">
      <only-office ref="officeDom"></only-office>
        <img class="img" src="../../assets/images/Arabian-Man.png" alt="">
        <div class="welcome">
            <img class="we" src="../../assets/images/sh.png">
            <div class="t1" @click="textHttp">您好，我是小旌</div>
            <div class="t2" @click="showFile">负责形式要件预审
                请先查询出您需要办理的事项，对照申请材料准备您的资料，准备好后上传材料进行预审。
            </div>
            <div class="list-out">
                <div class="ti">大家都在问：</div>
                <div class="q" v-for="x in global.faq" @click="question(x.faq)">{{x.faq}}</div>
                <!--                <div class="list">-->
                <!--                    <img src="../../assets/images/qw1.png" alt="">-->
                <!--                    <div class="des">-->
                <!--                        <div class="d1">智能材料预审（多智能体）</div>-->
                <!--                        <div class="d2">通过问答确认事项以后，可在问答界面上传事项所需的材料进行自动智能审批，并给出审批意见</div>-->
                <!--                    </div>-->
                <!--                </div>-->
                <!--                <div class="list">-->
                <!--                    <img src="../../assets/images/qw2.png" alt="">-->
                <!--                    <div class="des">-->
                <!--                        <div class="d1">政务咨询助手</div>-->
                <!--                        <div class="d2">如果您有有关于事项的任何问题，可向我进行提问，我能帮您查询事项指南和事项基本信息等。</div>-->
                <!--                    </div>-->
                <!--                </div>-->
                <!--                <div class="list">-->
                <!--                    <img src="../../assets/images/qw3.png" alt="">-->
                <!--                    <div class="des">-->
                <!--                        <div class="d1">政策咨询</div>-->
                <!--                        <div class="d2">如果您有关于政策方面的问题，我也可以根据已解析的政策文件，文件内容进行咨询解答</div>-->
                <!--                    </div>-->
                <!--                </div>-->
                <!--                <div class="list">-->
                <!--                    <img src="../../assets/images/qw4.png" alt="">-->
                <!--                    <div class="des">-->
                <!--                        <div class="d1">事项有哪些办理流程？</div>-->
                <!--                        <div class="d2">如果您不太清楚事项从受理到办结有哪些流程，您可以试着问我“这个事项的办理流程有哪些？”</div>-->
                <!--                    </div>-->
                <!--                </div>-->
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.answer-entry {
    width: 100%;
    min-height: 50px;
    position: relative;
    margin-bottom: 20px;

    .img {
        width: 30px;
        height: 30px;
        border-radius: 3px;
        position: absolute;
        left: -50px;
        top: 0;
    }

    .welcome {
        width: 100%;
        padding: 20px;
        background-color: white;
        border-radius: 20px;
        position: relative;
        //font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif;
        ///*下面是背景实现*/
        //background-image: linear-gradient(0deg, transparent 24%, rgba(201, 195, 195, .329) 25%, hsla(0, 8%, 80.4%, .05) 26%, transparent 27%, transparent 74%, hsla(0, 5.2%, 81%, .185) 75%, rgba(180, 176, 176, .05) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(204, 196, 196, .226) 25%, hsla(0, 4%, 66.1%, .05) 26%, transparent 27%, transparent 74%, hsla(0, 5.2%, 81%, .185) 75%, rgba(180, 176, 176, .05) 76%, transparent 77%, transparent);
        //background-size: 30px 30px;
        .we {
            width: 100px;
            height: 100px;
            position: absolute;
            left: 20px;
            top: 20px;
        }

        .t1 {
            font-size: 20px;
            padding-bottom: 15px;
            padding-left: 120px;
        }

        .t2 {
            font-size: 16px;
            padding-bottom: 4px;
            padding-left: 120px;
        }

        .list-out {
            padding-left: 120px;
            display: flex;
            flex-wrap: wrap;
            .ti{
                position: relative;
                top:20px;
            }
            .q {
                padding: 10px 15px;
                background-color: #f7f7f7;
                border-radius: 5px;
                margin-top: 10px;
                cursor: pointer;
                margin-right: 30px;
            }

            .q:hover {
                transition: all .3s;
                scale: 1.1;
            }

            .list {
                cursor: pointer;
                margin-top: 20px;
                width: 45%;
                padding: 10px;
                background-color: #f5f5f5;
                border-radius: 10px;
                display: inline-block;
                margin-left: 20px;

                img {
                    vertical-align: top;
                    display: inline-block;
                    width: 80px;
                    height: 80px;
                    margin-right: 10px;
                }

                .des {
                    font-size: 14px;
                    vertical-align: top;
                    width: calc(90% - 60px);
                    display: inline-block;

                    .d1 {
                        font-size: 14px;
                        padding-bottom: 6px;
                    }

                    .d2 {
                        color: #737373;
                        font-size: 12px;
                    }
                }
            }

            .list:hover {
                transition: all .3s;
                scale: 1.05;
            }

            .ac {
                background-color: #cbcbcb;
                scale: 1.05;
            }
        }
    }
}
</style>
